<template>
  <div
    class="login u-f u-f-ac u-f-ajc"
    :style="`background:Url(${loginBgm});background-size:cover`"
  >
    <section class="login-box animate__animated animate__slideInDown">
      <div class="login-left u-f u-f-ac u-f-ajc">
        <img class="login-img" src="@/assets/icons/svg/login-img1.svg" alt="" />
      </div>
      <div class="login-right u-f u-f-ajc" >
        <el-form
          :model="formModel"
          ref="formRef"
          class="login-form"
          status-icon
        >
          <h3 class="login-form-title u-f u-f-ac u-f-ajc">vueCms</h3>
          <el-form-item>
            <el-input v-model="formModel.username" />
            <el-input
              v-model="formModel.password"
              type="password"
              placeholder="密码"
            />
          </el-form-item>
          <el-form-item prop="code">
            <div class="u-f u-f-ajs" style="width: 100%">
              <div>
                <el-input
                  placeholder="验证码"
                  style="width: 120px"
                  v-model.trim="formModel.code"
                ></el-input>
              </div>
              <div>
                <PicCode
                  ref="picCodeRef"
                  :width="100"
                  :height="38"
                  v-model:code="code"
                />
              </div>
            </div>
          </el-form-item>
          <div class="u-f u-f-ajs u-f-ac margin-booton-15">
            <el-checkbox
              :checked="formModel.rememberMe"
              v-model="formModel.rememberMe"
            >
              记住密码
            </el-checkbox>
          </div>
          <el-form-item>
            <el-button
              class="margin-bottom-10"
              style="width: 100%"
              :loading="globalLoading"
              @click="handleSubmit(formRef)"
              type="primary"
            >
              登录
            </el-button>
            <el-button
              style="width: 100%; margin-left: 0px"
              type="warning"
              @click="handleReset(formRef)"
            >
              重置
            </el-button>
          </el-form-item>
          <el-form-item style="width: 100%">
            <ThirdLogin />
          </el-form-item>
        </el-form>
      </div>
    </section>
  </div>
</template>
<script setup lang="ts">
import loginBgm from "@/assets/img/loginBgm.png";
import { useFunc } from "@/views/login/hooks/useFunc";
import PicCode from "@/components/picCode";
import ThirdLogin from "@/views/login/cpns/thirdLogin/index.vue"

let {
  formModel,
  formRef,
  code,
  picCodeRef,
  globalLoading,
  handleSubmit,
  handleReset,
} = useFunc();
</script>

<style scoped lang="less">
.login {
  height: 100vh;
  background: linear-gradient(180deg, #2e3d4e, #001528);
  &-box {
    display: flex;
    width: 820px;
    height: 525px;
    z-index: 999;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
    .login-left {
      flex: 1;
      background: linear-gradient(60deg, rgb(39, 91, 214), rgb(16, 54, 171));
      .login-img {
        width: 100%;
        height: 100%;
        transition: all 0.3s;
        object-fit: cover;
      }
    }
    .login-right {
      width: 320px;
      height: 100%;
      box-sizing: border-box;
      background: white;
      .login-form {
        width: 84%;
        border-radius: 10px;
        .el-input {
          height: 30px;
          input {
            height: 30px;
          }
        }
        .login-form-title {
          font-weight: 700;
          position: relative;
        }
      }
    }
  }
}
</style>